<template>
  <div class="tool-wrapper" v-if="isShow">
    <div class="tool-steps">
      <div class="tool-step__head">
        <div class="tool-step__line is-finish"></div>
        <div class="step__circle is-finish">1</div>
      </div>
      <div class="tool-step__head" >
        <div class="tool-step__line" :class="{'is-finish': stage !== 'one'}"></div>
        <div class="step__circle" :class="{'is-finish': stage !== 'one'}">2</div>
      </div>
      <div class="tool-step__head last__head" v-if="content[2]" >
        <div class="tool-step__line" :class="{'is-finish': stage === 'three'}"></div>
        <div class="step__circle " :class="{'is-finish': stage === 'three'}">3</div>
        <div class="tool-step__line line_right" ></div>
      </div>
      <div class="tool-step__head last__head2" v-else>
        <div class="tool-step__line" style="transform: translateY(-7px);" :class="{'is-finish': stage === 'two'}"></div>
      </div>
    </div>
    <div class="step-text-wrapper">
      <span class="step-text active" :style="{'transform': content[2] ? '' : 'translateX(108px)'}">{{content[0]}}</span>
      <span class="step-text" :style="{'transform': content[2] ? '' : 'translateX(108px)'}" :class="{'active': stage !== 'one'}">{{content[1]}}</span> 
      <span class="step-text" v-if="content[2]" :class="{'active': stage == 'three'}">{{content[2]}}</span> 
    </div>
  </div>
</template>

<script>
export default {
  name: 'step',
  props: {
    isShow: {
      type: Boolean,
      default: true
    },
    stage: {
      type: String,
      default: 'one'
    },
    content: {
      type: Array,
      default: () => {
        return ['验证手机号', '填写账号信息', '完成注册']
      }
    }
  }
}
</script>

<style lang="scss" scoped>
  .tool-steps{
    width: 1000px;
    // display: flex;
    // justify-content: center;
    margin: 0 auto;
    text-align: center;
  }
  .tool-step__head{
    position: relative;
    display: inline-block;
    margin-right: 0px;
    width: 21%;
    // flex-basis: 21%;
    text-align: right;
    padding-right: 10px;
    box-sizing: border-box;
    .tool-step__line{
      position: absolute;
      border-color: inherit;
      background-color: #e4e5e7;
      width: 150px;
      height: 4px;
      border-radius: 10px;
      top: 50%;
      transform: translateY(-50%);
    }
    .line_right{
      position: absolute;
      border-color: inherit;
      background-color: #e4e5e7;
      width: 150px;
      height: 4px;
      border-radius: 4px;
      right: 0;
      top: 50%;
      transform: translateY(-50%);
    }
    .step__circle{
      display: inline-block;
      background: #e4e5e7;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      color: #ffffff;
      font-size: 18px;
      line-height: 40px;
      text-align: center;
    }
    .is-finish{
      background: #FFC400;
    }
  }
  .last__head{
    // flex-basis: 36%;
    width: 36%;
    text-align: center;
    padding-right: 0;
  }
  .last__head2{
    width: 15%;
    text-align: center;
    padding-right: 0;
  }
  .step-text-wrapper{
    width: 645px;
    margin: 10px auto 80px;
    .step-text{
      display: inline-block;
      width: 32.5%;
      text-align: center;
      color: #e4e5e7;
    }
    .active{
      color: #303030;
    }
  }

</style>
